<template>
	<view class="content">
		<view class="header">
			<view class="iphonehegiht" :style="{height: systemBarHeight + 'px'}">
			</view>
			<view class="header_tit">
				<text>品牌列表</text>
			</view>

			<!-- banner -->
			<view class="swiper">
				<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item>
						<view class="swiper-item">
							<image src="/static/logo.png" mode=""></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<image src="/static/logo.png" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</view>

			<view class="type">
				<view class="type_item">
					<image src="/static/model/model1.png" mode=""></image>
					<text>销量排行</text>
				</view>
				<view class="type_item" @click="newproduct()">
					<image src="/static/model/model2.png" mode=""></image>
					<text>新品上市</text>
				</view>
				<view class="type_item" @click="productseclet()">
					<image src="/static/model/model3.png" mode=""></image>
					<text>条件选机</text>
				</view>
				<view class="type_item" @click="contrast()">
					<image src="/static/model/model4.png" mode=""></image>
					<text>机型对比</text>
				</view>
			</view>
		</view>

		<!--  -->
		<view class="brand">

			<view class="brand1">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll" :scroll-with-animation="true" :scroll-into-view="setter">
					<view class="brand_list" v-for="(item,index) in List" :key="index" :id="item.letter">
						<view class="brand_list_tit">
							<text>{{item.letter}}</text>
						</view>

						<view class="brand_list_item" v-for="(va,index) in item.brandList" :key="index" @click="details()">
							<view class="brand_list_item1">
								<image src="/static/logo.png" mode=""></image>
								<text>{{va.tit}}</text>
							</view>
						</view>
					</view>


				</scroll-view>

			</view>
			<view class="letter">
				<view class="letter_item"
					:style="{background:setterclick==index?'#1677FF':'',color:setterclick==index?'#ffffff':''}"
					v-for="(item,index) in nmbList" :key="index" @click="setterchange(item,index)">
					<text>{{item}}</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				systemBarHeight: 0,
				setterclick: 0,
				setter: '',
				nmbList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
					'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
				],
				List: [{
						letter: 'A',
						brandList: [{
								tit: '奥迪'
							},
							{
								tit: '奥迪'
							},
							{
								tit: '奥迪'
							},
							{
								tit: '奥迪'
							}
						]
					},
					{
						letter: 'B',
						brandList: [{
								tit: '奔驰'
							},
							{
								tit: '奔驰'
							},
							{
								tit: '奔驰'
							},
							{
								tit: '奔驰'
							}
						]
					},
					{
						letter: 'C',
						brandList: [{
								tit: '奔驰'
							},
							{
								tit: '奔驰'
							},
							{
								tit: '奔驰'
							},
							{
								tit: '奔驰'
							}
						]
					},
					{
						letter: 'D',
						brandList: [{
								tit: '奔驰'
							},
							{
								tit: '奔驰'
							},
							{
								tit: '奔驰'
							},
							{
								tit: '奔驰'
							}
						]
					},
					{
						letter: 'E',
						brandList: [{
								tit: '奔驰'
							},
							{
								tit: '奔驰'
							},
							{
								tit: '奔驰'
							},
							{
								tit: '奔驰'
							}
						]
					},
					{
						letter: 'F',
						brandList: [{
								tit: '奔驰'
							},
							{
								tit: '奔驰'
							},
							{
								tit: '奔驰'
							},
							{
								tit: '奔驰'
							}
						]
					}
				]
			}
		},
		mounted() {
			this.getSysteminfo()
		},
		methods: {
			/* 手机顶部高度 */
			getSysteminfo() {
				uni.getSystemInfo({
					success: res => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
			},
			/* 选择字母 */
			setterchange(item, index) {
				this.setter = item
				this.setterclick = index
				console.log(this.setter)

			},
			
			newproduct(){
				uni.navigateTo({
					url:'/pages/model/new_product'
				})
			},
			productseclet(){
				uni.navigateTo({
					url:'/pages/model/product_sectet'
				})
			},
			details(){
				uni.navigateTo({
					url:'/pages/model/brand_Details'
				})
			},
			contrast(){
				uni.navigateTo({
					url:'/pages/model/product_contrast'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {

		width: 750rpx;
		
		background: #F4F6F9;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.header {
		background: #ffffff;
		padding-bottom: 45rpx;
	}

	.header_tit {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 31rpx;
		color: #000000;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.swiper {
		margin-top: 15rpx;

		.swiper-item {
			width: 689rpx;
			height: 267rpx;
			border-radius: 15rpx 15rpx 15rpx 15rpx;
			margin: auto;

			>image {
				width: 689rpx;
				height: 267rpx;
			}
		}
	}

	.type {
		width: 91%;
		display: flex;
		margin: 32rpx auto 0;

		.type_item {
			width: 25%;
			display: flex;
			flex-direction: column;
			justify-content: center;

			>image {
				width: 57.25rpx;
				height: 57.25rpx;
				margin: auto;
			}

			>text {
				margin: 9rpx auto 0;
			}
		}

	}

	.brand1 {
		display: flex;
	}

	.brand {
		display: flex;
		width: 100%;
		

		.letter {
			width: 35rpx;
			position: relative;
			margin-left: auto;
			margin-right: 30rpx;
			z-index: 11;
			top: 0;

			.letter_item {
				width: 35rpx;
				height: 35rpx;
				color: #7D8CA4;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 23rpx;
				margin-top: 20rpx;
				border-radius: 17.5rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.brand_list {

			.brand_list_tit {
				margin-top: 10rpx;
				margin-bottom: 10rpx;


				>text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 31rpx;
					color: #7D8CA4;
					margin-left: 30rpx;
				}
			}

			.brand_list_item {
				background: #FFFFFF;

				.brand_list_item1 {
					display: flex;
					align-items: center;
					padding-top: 30rpx;
					padding-bottom: 30rpx;
					margin-left: 30rpx;

					>image {
						width: 64.89rpx;
						height: 64.89rpx;
					}

					>text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 34rpx;
						color: #000000;
						margin-left: 30rpx;
					}
				}
			}
		}
	}

	.scroll-Y {

		height: 1450rpx;
		display: flex;
		position: absolute;
	}
	scroll-view ::-webkit-scrollbar {
	  width: 0;
	  height: 0;
	  color: transparent;
	  display: none;
	}
</style>